<!-- ComputedExample.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue'

const price = ref(25)
const quantity = ref(2)
const discount = ref(0.8)

// 计算购物车总价
const total = computed<number>(() => {
  return price.value * quantity.value * discount.value
})

// 再来一杯
const add = () => quantity.value++
</script>

<template>
  <div class="computed-example">
    <p>单价：{{ price }} × 数量：{{ quantity }} × 折扣：{{ discount }}</p>
    <h4>应付：{{ total.toFixed(2) }} 元</h4>
    <button @click="add">再来一杯</button>
  </div>
</template>

<style scoped>
.computed-example {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-top: 10px;
}
</style>